<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>{{ site.title }} - {{ site.description }}</title>
    <meta name="description" content="Extending the microservice idea to frontend development. Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.">
    <meta name="viewport" content="width=device-width">
    <link rel="canonical" href="https://micro-frontends.org/" />
    <link rel="alternate" hreflang="ja" href="https://micro-frontends-japanese.org/" />
    <link rel="alternate" hreflang="es" href="https://micro-frontends-es.org/" />
    <link rel="alternate" hreflang="pt" href="https://tautorn.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="ko" href="https://soobing.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="ru" href="https://serzn1.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="cn" href="https://swearer23.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="it" href="https://riccardogmoschetti.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="pl" href="https://dominikcz.github.io/micro-frontends/" />
    <link rel="alternate" hreflang="fa" href="https://johnadib.github.io/micro-frontends/" />
    <meta name="google-site-verification" content="c7SiEYdpLXi4umYrM7Ey3HXm3AkK8vlsmc9X4ThnYSA" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://micro-frontends.org/" />
    <meta property="og:image" content="/ressources/screen/three-teams.png" />
    <meta property="og:site_name" content="Micro Frontends" />
    <meta property="og:description" content="Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks." />
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "https://micro-frontends.org/"
        },
        "datePublished": "2017-08-28T20:00:00+01:00",
        "dateModified": "2017-08-28T20:20:00+01:00",
        "headline": "Micro Frontends",
        "description": "Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.",
        "image": {
          "@type": "ImageObject",
          "url": "https://micro-frontends.org/ressources/screen/three-teams.png",
          "height": 1000,
          "width": 722
        },
        "author": {
          "@type": "Person",
          "name": "Michael Geers"
        },
        "publisher": {
          "@type": "Organization",
          "url": "https://www.neuland-bfi.de/",
          "name": "neuland - Büro für Informatik",
          "logo": {
            "@type": "ImageObject",
            "url": "https://www.neuland-bfi.de/~michael.geers/neuland-small.png",
            "width": 208,
            "height": 60
          }
        }
      }
    </script>
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
    <link rel="stylesheet" href="{{ '/assets/css/print.css' | relative_url }}" media="print" type="text/css">
  </head>

  <body>
    <header>
      <div class="inner">
        <a href="{{ '/' | absolute_url }}">
          <h1>{{ site.title }}</h1>
        </a>
        <h2>{{ site.description | default: site.github.project_tagline }}</h2>
        {% if site.github.is_project_page %}
          <a href="{{ site.github.repository_url }}" class="button"><small>View project on</small> GitHub</a>
        {% endif %}
        {% if site.github.is_user_page %}
          <a href="{{ site.github.repository_url }}" class="button"><small>Follow me on</small> GitHub</a>
        {% endif %}
        <div class="languages">
          <strong>EN</strong>
          <a href="https://micro-frontends-japanese.org/">JP</a>
          <a href="https://micro-frontends-es.org/">ES</a>
          <a href="https://tautorn.github.io/micro-frontends/">PT</a>
          <a href="https://soobing.github.io/micro-frontends/">KR</a>
          <a href="https://serzn1.github.io/micro-frontends/">RU</a>
          <a href="https://swearer23.github.io/micro-frontends/">CN</a>
          <a href="https://riccardogmoschetti.github.io/micro-frontends/">IT</a>
          <a href="https://dominikcz.github.io/micro-frontends/">PL</a>
          <a href="https://johnadib.github.io/micro-frontends/">FA</a>
        </div>
      </div>
    </header>

    <div id="content-wrapper">
      <div class="inner clearfix">
        <section id="main-content">
          {{ content }}
        </section>

        <aside id="sidebar">
          <div class="tractorstore">
            <h2>Tractor Store 2.0</h2>
            <a href="/tractor-store/">
              <img src="/ressources/images/tractor-store-2.webp" alt="product page of the tractor store 2.0">
            </a>
            <p>
              A full-featured micro frontends application implemented
              with different techniques and frameworks.
              <a href="/tractor-store/">Think of TodoMVC, but for Micro Frontends.</a>
            </p>
          </div>
          <div class="author">
            <h2>The Author</h2>
            <img src="/ressources/images/michael-geers-75.jpg" srcset="/ressources/images/michael-geers-75.jpg 1x, /ressources/images/michael-geers-150.jpg 2x" alt="Author Michael Geers">
            <a href="https://geers.tv"><strong>Michael Geers</strong></a> is a software engineer at <a href="https://www.neuland-bfi.de/">neuland Büro für Informatik</a>.<br>He worked on multiple large e-commerce projects over the last ten years.<br>He loves the frontend and is passionate about design systems and web-performance.<br>
            Follow on <a href="https://mastodon.social/@naltatis">Mastodon</a> or <a href="https://github.com/naltatis">GitHub</a>.
          </div>
          <div class="book">
            <div class="book__inner">
              <h2>The Book 🚜</h2>
              <div class="book__details">
                <a href="https://www.manning.com/books/micro-frontends-in-action?a_aid=mfia&a_bid=5f09fdeb">
                  <img src="/ressources/images/micro-frontends-in-action-book-200.png" srcset="/ressources/images/micro-frontends-in-action-book-200.png 1x, /ressources/images/micro-frontends-in-action-book-400.png 2x" alt="book cover Micro Frontends in Action">
                </a>
                <div class="book__text">
                  <strong>Micro Frontends in Action</strong>
                  <p>find the interactive examples at <a href="https://the-tractor.store/">the-tractor.store</a>.</p>
                  <p>buy it as print or ebook
                    from <a href="https://www.manning.com/books/micro-frontends-in-action?a_aid=mfia&a_bid=5f09fdeb">Manning Publications</a>, <a href="https://the-tractor.store/book">Amazon</a> or your <a href="https://en.wikipedia.org/wiki/Special:BookSources?isbn=1617296872" class="favorite-link">favorite book store</a>.
                    <small class="favorite-note hidden">💚 Support your local bookseller!<br>The ISBN is <a href="https://en.wikipedia.org/wiki/Special:BookSources?isbn=1617296872">1617296872</a>.<br>Every print book comes with a free code for the kindle, ebook, PDF and online version.</small>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
    <script>
      document.querySelector('.favorite-link').addEventListener('click', function(e) {
        e.preventDefault();
        var note = document.querySelector('.favorite-note').classList.toggle('hidden')
      });
    </script>
  </body>
</html>